<template>
  <view>
    <view class="tabbar-container" :class="isIpx ? 'IpxBot' : ''">
      <view
        class="tabbar-item"
        v-for="(item, index) in tabList"
        :class="[item.centerItem ? 'center-item' : '']"
        @click="changeItem(item)"
        :key="index"
      >
        <view class="item-top">
          <image :src="tabId == item.id ? item.selectIcon : item.icon" mode=""></image>
        </view>
        <view class="item-bottom" :class="[tabId == item.id ? 'item-active' : '']">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="tabber-h"></view>
    <van-popup :show="isShow" position="bottom" custom-style="height: 100vh;">
      <view class="public">
        <view class="public-title">发布一条信息</view>
        <view class="public-box">
          <view class="public-list" @click="goPage(1)">
            <image class="img-box" src="https://images.tongzhuangkc.com/tz/icon-chushou.png" alt="" />
            <text>出售信息</text>
          </view>
          <view class="public-list" @click="goPage(2)">
            <image class="img-box" src="https://images.tongzhuangkc.com/tz/icon-shougou.png" alt="" />
            <text>收购信息</text>
          </view>
        </view>
        <view class="public-close" @click="isShow = false">
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/icon-close.png" alt="" />
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      //适配IPhoneX
      isIpx: false,
      isShow: false,
      //底部Tab
      tabId: 0,
      tabList: [
        {
          id: 0,
          path: '/pages/home/index',
          icon: '/static/images/tabbar/home.png',
          selectIcon: '/static/images/tabbar/home-active.png',
          text: '首页',
          centerItem: false,
        },
        {
          id: 1,
          path: '/pages/goods/index',
          icon: '/static/images/tabbar/goods.png',
          selectIcon: '/static/images/tabbar/goods-active.png',
          text: '商品',
          centerItem: false,
        },
        {
          id: 2,
          path: '/pages/public/index',
          icon: '/static/images/tabbar/publish.png',
          selectIcon: '/static/images/tabbar/publish.png',
          text: '',
          centerItem: true,
        },
        {
          id: 3,
          path: '/pages/shops/index',
          icon: '/static/images/tabbar/shop.png',
          selectIcon: '/static/images/tabbar/shop-active.png',
          text: '商铺',
          centerItem: false,
        },
        {
          id: 4,
          path: '/pages/user/index',
          icon: '/static/images/tabbar/user.png',
          selectIcon: '/static/images/tabbar/user-active.png',
          text: '我的',
          centerItem: false,
        },
      ],
    }
  },
  mounted() {
    this.tabId = this.currentPage
    //隐藏原生tab
    uni.hideTabBar()
    let that = this
    uni.getSystemInfo({
      success: function (res) {
        that.isIpx = res.safeAreaInsets.bottom != 0
      },
    })
  },
  created() {},
  methods: {
    // tab 切换
    changeItem(item) {
      if (item.id == 2) {
        this.isShow = true
      } else {
        uni.removeStorageSync('searchVal')
        uni.switchTab({
          url: item.path,
        })
      }
    },
    goPage(type) {
      this.isShow = false
      uni.removeStorageSync('searchVal')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/public/index?type=${type}`,
        })
      }, 500)
    },
  },
}
</script>
<style scoped lang="scss">
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabber-h {
  height: 120rpx;
}
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
  background: url('~@/static/images/tabbar/bottom-bg.png') no-repeat;
  background-size: 100% 100%;
}

.tabbar-container .tabbar-item {
  width: 20%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.tabbar-container .item-active {
  color: #3775f2;
}

.tabbar-container .center-item {
  display: block;
  position: relative;
}

.tabbar-container .tabbar-item .item-top {
  width: 64rpx;
  height: 64rpx;
}

.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 96rpx;
  height: 96rpx;
  position: absolute;
  top: -48rpx;
  left: calc(50% - 48rpx);
  border-radius: 50%;
}

.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}

.tabbar-container .tabbar-item .item-bottom {
  font-size: 25rpx;
  width: 100%;
}

.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 2rpx;
}

/* 适配iPhone X */
.IpxBot {
  padding-bottom: 30rpx !important;
}
.public {
  text-align: center;
  position: absolute;
  bottom: 50rpx;
  width: 100%;
  .public-title {
    font-size: 48rpx;
    font-weight: 500;
    color: #2b303b;
    margin-bottom: 128rpx;
  }
  .public-box {
    display: flex;
    justify-content: center;
    margin-bottom: 160rpx;
    .public-list {
      width: 140rpx;
      margin: 0 64rpx;
      text-align: center;
      .img-box {
        display: block;
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto;
      }
      text {
        font-size: 28rpx;
        color: #3f4555;
      }
    }
  }
  .public-close {
    .img-box {
      width: 64rpx;
      height: 64rpx;
    }
  }
}
</style>
